<script setup lang="ts">
// 定义快捷操作项的类型
interface QuickAction {
  id: string
  icon: string
  title: string
  color: string
  bgColor: string
}

// 定义组件的属性
interface Props {
  actions: QuickAction[]
}

// 定义组件的事件
interface Emits {
  (e: 'click', action: QuickAction): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

// 处理快捷操作点击
function handleClick(action: QuickAction) {
  emit('click', action)
}
</script>

<template>
  <view class="quick-actions-container">
    <view class="grid grid-cols-4 gap-4 px-4">
      <view
        v-for="action in actions"
        :key="action.id"
        class="menu-item flex flex-col items-center"
        @click="handleClick(action)"
      >
        <view
          class="mb-2 h-12 w-12 flex items-center justify-center rounded-lg"
          :style="{ backgroundColor: action.bgColor }"
        >
          <view :class="`i-solar:${action.icon} text-2xl`" :style="{ color: action.color }" />
        </view>
        <text class="text-center text-xs text-gray-700">{{ action.title }}</text>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
// 快捷操作按钮样式
.menu-item {
  transition: all 0.2s ease;
}

.menu-item:active {
  opacity: 0.9;
  transform: scale(0.95);
}

.menu-item view {
  transition: all 0.2s ease;
}

.menu-item:active view {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
</style>
